<template>
	<view class="wrapper">
		<div class="main">
			<div class="box bfff mb30" v-for="v in list" :key="v.id">
				<div class="flex-start mb30">
					<div class="f30 mr18">{{v.receiver}}</div>
					<div class="f30">{{v.receiverPhone}}</div>
				</div>
				<div class="f26 address mb28">{{v.dzqc}}</div>
				<div class="t-bott space-between ">
					<div class="flex-start mr20 ">						
						<!-- <image src="@/static/mall/shop_checked.png" mode="widthFix" class="t-icon"></image>
						<image src="@/static/mall/shop_check.png" mode="widthFix" class="t-icon"></image>						
						<div class="f32 ml12">默认</div> -->
					</div>
					<div class="flex1"></div>
					<div class="t-btn center mr30 f28" @click="goDelete(v.id)">删除</div>
					<div class="t-btn center f28" @click="goChange(v)">修改</div>
				</div>
			</div>
			<u-empty v-if="list.length==0" text="暂无收货地址"></u-empty>
			<div class="btn-add center" @click="openPage('./tianJiaDiZhi')">
				<div class="f36 btn-address center cfff">新增地址</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
			}
		},
		onShow() {
			this.queryList()
		},
		methods: {
			// 修改收货地址
			goChange(v){
				uni.setStorageSync('adress',v)
				this.openPage('./tianJiaDiZhi?type=1')
			},
			// 删除收货地址
			goDelete(id){
				let that = this
				uni.showModal({
					title:'温馨提示',
					content:'确认删除吗？',
					success(r) {
						if(r.confirm){
							that.$http('/api/address/delete',{
								id:id
							},true,'POST').then(r =>{
								that.queryList()
							})
						}
					}
				})
				
			},
			// 查询收货地址
			queryList() {
				this.$http('/api/address/queryList').then((r) => {
		
					this.list = r.data
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.btn-add{
		padding: 60rpx 0;
		.btn-address{
			width: 600rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background: linear-gradient(90deg, #FF8901 0%, #FF5325 100%);
		}
	}
	.main {
		padding: 30rpx 32rpx 60rpx;
		.box{
			width: 686rpx;
			border-radius: 12rpx;
			box-shadow: 0rpx 0rpx 30rpx  #E6E6E6;
			padding: 32rpx 28rpx 18rpx;
			.address{
				padding-bottom: 35rpx;
				border-bottom: 1rpx solid #C3C3C3;
			}
			.t-icon{
				width: 30rpx;
				height: 30rpx;
			}
			.t-btn{
				width: 160rpx;
				height: 60rpx;
				border-radius: 30rpx;
				
				border: 2rpx solid #C4C4C4;
				

			}
		}
	}
</style>
